<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息录入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <link rel="stylesheet" href="css/jquery.dialogbox.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/jquery.dialogBox.js"></script>
    <script>
        $(function () {
            var href = location.href;
            var stuId = 0;
            if(href.indexOf("?")>0){
                var id = href.split("?")[1];
                stuId = id.split("=")[1];
            }
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889',
                    student:{stuSex:0},
                    sex:'',
                    posd:'',
                    stusex:0,
                    maxId:0
                },
                methods:{
                    getStudent:function(){
                        var that = this;
                        if(stuId>0){
                            $.getJSON(that.url+"/student/find/"+stuId,function(data){
                                that.student = data;
                                if(that.student.stuSex == 1){
                                    that.sex = '男'
                                }else if(that.student.stuSex == 0){
                                    that.sex = '女'
                                }

                            });
                        }
                    },
                    getMaxId:function(){
                        var that = this;
                        $.getJSON(that.url+"/student/maxId",function(data){
                            console.log(data)

                            that.maxId = data;
                            console.log(that.maxId)
                        });
                    },
                    save:function () {
                        var that = this;
                        if(that.sex == '男'){
                            that.stuSex = 1
                        }else if(that.sex == '女'){
                            that.stuSex = 0
                        }
                        var account = "x000"+(that.maxId+1);
                        var ps = {
                            stuId : that.student.stuId,
                            stuName:that.student.stuName,
                            phone: that.student.phone,
                            password : that.student.password,
                            stuSex:that.student.stuSex,
                            stuAge:that.student.stuAge,
                            email:that.student.email,
                            userType:6,
                            remark:that.student.remark,
                            status :1,
                            number:account
                        }

                        if((ps.stuName==null)||(ps.stuSex==null)||(ps.phone==null)||(ps.stuAge==null)||(ps.email==null)){
                            setTimeout(function(){
                                $('#type-delBox2').dialogBox({
                                    autoHide: true,
                                    time: 2000,
                                    width:300,
                                    height:60,
                                    content: '请完善学员信息！'
                                });
                            }, 500);
                        }else{
                            if(ps.remark!=null){
                                var info = {
                                    remark:ps.remark
                                }
                                $.post(that.url+"/student/query",info,function(data){
                                    if(data.list!=null&&data.list!=""){
                                        console.log(data.list)
                                        setTimeout(function(){
                                            $('#type-delBox2').dialogBox({
                                                autoHide: true,
                                                time: 2000,
                                                width:300,
                                                height:60,
                                                content: '请输入唯一标识！'
                                            });
                                        }, 500);
                                    }else{
                                        if(that.posd == ps.password){
                                            $.post(that.url+'/student/save',ps,function (data) {
                                                if(data !=null) {
                                                    that.student.stuId = data.stuId;
                                                    setTimeout(function(){
                                                        $('#type-delBox2').dialogBox({
                                                            autoHide: true,
                                                            time: 2000,
                                                            width:300,
                                                            height:60,
                                                            content: '学员信息保存成功！'
                                                        });
                                                    }, 500);
                                                    console.log(ps);
                                                }else{
                                                    setTimeout(function(){
                                                        $('#type-delBox2').dialogBox({
                                                            autoHide: true,
                                                            time: 2000,
                                                            width:300,
                                                            height:60,
                                                            content: '学员信息保存失败！'
                                                        });
                                                    }, 500);
                                                    console.log(ps);
                                                    $("#remark").val("")
                                                }
                                            })

                                        }else{
                                            setTimeout(function(){
                                                $('#type-delBox2').dialogBox({
                                                    autoHide: true,
                                                    time: 2000,
                                                    width:300,
                                                    height:60,
                                                    content: '两次密码不同，请重新输入！'
                                                });
                                            }, 500);
                                        }
                                    }
                                })
                            }else{
                                setTimeout(function(){
                                    $('#type-delBox2').dialogBox({
                                        autoHide: true,
                                        time: 2000,
                                        width:300,
                                        height:60,
                                        content: '请输入唯一标识remarkelse！'
                                    });
                                }, 500);
                            }

                        }

                    }
                }
            });
            $("#header").load("header.html");
            $("#left").load("left.html");
            vue.getStudent();
            vue.getMaxId();
        })
    </script>
    <style>
        .input-group-addon{background: #fff}
        .mrow{margin-top:15px;padding:5px 15px;}
        .msg{padding-top:10px;font-size:16px;font-weight: bold}
        .file{opacity: 0;width:0;height:0;position:absolute;top:0;left:0;z-index:-1}
        .bg {
            background:url(images/subject/bg2.jpg) no-repeat center fixed;
            background-size:100%;
        }
        .bgcon{

            background: white;
            opacity:0.9;
        }
        .jllb{

            margin-left:10px;
            margin-top:10px;
            margin-bottom:10px;
        }
        .remark{
            margin-bottom: 20px;
            margin-right: 10px;
            color: #737373;
        }
        .tithead{
            margin-left:5px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div class="container-fluid bgcon" id="app">
    <div class="row" id="header">

    </div>
    <div class="row">
        <div class="col-md-2" id="left">

        </div>
        <div class="col-md-9" tyle="margin-left:30px;margin-top:10px">
            <div class="row tithead">
                <div class="col-md-4"><h3 class="glyphicon glyphicon-list"> 学员信息管理
                </h3></div>
                <div class="col-md-6"></div>

                <div class="col-md-2" >
                    <h4 style="margin-top:30px;margin-left:30px">
                        <a href="students.html" style="text-decoration:none;color: #666666">
                            学员列表 <i class="glyphicon glyphicon-chevron-right"></i>
                        </a>
                    </h4>
                </div>

            </div>
            <div class="row">
                <div class="col-md-12">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#stu" aria-controls="stu" role="tab" data-toggle="tab">学员基本信息</a>
                            </li>

                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="stu">
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">学员姓名</label>
                                        <input v-model="student.stuName" class="form-control" placeholder="请输入学员姓名">
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">学员账号</label>
                                        <input v-model="student.number" class="form-control" placeholder="学生账号自动生成" readonly>
                                    </div>
                                </div>

                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">手机号码</label>
                                        <input v-model="student.phone" class="form-control"  placeholder="请输入手机号码">
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">输入密码</label>
                                        <input v-model="student.password"class="form-control" type="password"  placeholder="请输入密码">
                                    </div>
                                </div><div class="form-group mrow">
                                <div class="input-group">
                                    <label class="input-group-addon">确认密码</label>
                                    <input v-model="posd"class="form-control" type="password"  placeholder="请确认密码">
                                </div>
                            </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">性别</label>
                                        <!--<input v-model="sex"class="form-control" placeholder="男 / 女">-->
                                        <select v-model="student.stuSex" class="form-control">
                                            <option value="0">女</option>
                                            <option value="1">男</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">年龄</label>
                                        <input v-model="student.stuAge" type="number" class="form-control" placeholder="请输入年龄">
                                        <label class="input-group-addon">岁</label>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">微信号</label>
                                        <input v-model="student.email" class="form-control"  placeholder="请输入微信号">
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">备注</label>
                                        <input v-model="student.remark" class="form-control"  placeholder="输入请输入备注信息" id="remark">
                                    </div>
                                </div>
                                <div class="row mrow">


                                    <div class="col-md-10">
                                        <p class="text-center msg" id="msg"></p>
                                    </div>
                                    <div class="col-md-2">
                                        <button @click="save" class="btn btn-primary btn-block">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-right remark"><h5>备注：教练详细信息录入</h5></div>
        </div>
    </div>
</div>
<div id="type-delBox"></div>
<div id="type-delBox2"></div>
</body>
</html>